<!--
 * @Descripttion: 新增销售订单
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-03-22 07:42:24
 -->
<template>
  <div class="bill_container">
    <el-main>
      <el-form
        ref="billForm"
        :model="dataObj"
        :rules="ruleValidator"
        label-position="right"
        label-width="90px"
      >
        <div class="w300">
          <el-form-item label="账目类型: " prop="name">
            <el-input v-model="dataObj.name" />
          </el-form-item>
          <el-form-item label="收支类别: " prop="direction">
            <el-select
              v-model="dataObj.direction"
              class="wfull"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsData.direction"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注: ">
            <el-input v-model="dataObj.remarks" type="textarea" size="mini" />
          </el-form-item>
        </div>
      </el-form>
    </el-main>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import clonedeep from 'clonedeep'

export default {
  name: 'CapitalCatDetail',
  components: { },
  filters: {
  },
  mixins: [oftenuse],
  props: {
    data: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      optionsData: {
        direction: [{ value: '0', label: '支出' }, { value: '1', label: '收入' }]
      },
      ruleValidator: {
        name: [
          { required: true, message: '账目类型不能为空！', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.dataObj = clonedeep(this.data) || {}
  },
  methods: {
    // api
    handleVali() {
      const v1 = this.handleValid('billForm')
      return Promise.all([v1])
    },
    // on
    // api
    getData() {
      const data = clonedeep(this.dataObj)
      return data
    }
  }
}
</script>
